<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="state.nickname"
        name="nickname"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />

      <van-field name="avatar" label="选择头像">
        <template #input>
          <van-uploader v-model="value" />
        </template>
      </van-field>

      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="state.checked" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="state.area"
        readonly
        clickable
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="state.showArea = true"
      />
      <van-popup v-model:show="state.showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="state.showArea = false"
        />
      </van-popup>

      <van-field
        v-model="state.birthday"
        readonly
        clickable
        name="birthday"
        label="生日"
        placeholder="点击选择时间"
        @click="state.showPicker = true"
      />
      <van-popup v-model:show="state.showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmtime"
          @cancel="state.showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="state.height"
        name="height"
        label="身高"
        placeholder="身高"
        :rules="[{ required: true, message: '请填写身高' }]"
      />
      <van-field
        v-model="state.motto"
        name="motto"
        label="个性签名"
        placeholder="个性签名"
        :rules="[{ required: true, message: '请填写个性签名' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { personal } from '../api'
import { areaList } from "@vant/area-data";
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'
export default {
  setup() {
    const state = reactive({
      nickname: "",
      area: "",
      height: "",
      motto: "",
      gender: "",
      birthday: "",
      avatar:'',
      showArea: false,
      showPicker: false,
    });
    //router
    const router = useRouter()

    //出生日期
    const onConfirmtime = (value) => {
      value = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
      console.log(value);
      state.birthday = value;
      state.showPicker = false;
    };
    const currentDate = ref(new Date(2000, 0, 0));

    //地址
    const value = ref([]);
    const onConfirm = (value) => {
      state.showArea = false;
      state.area = value
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
    };
    //修改地址的信息
    const Fix = (value) => {
      const arr = value.split("/");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == arr[i + 1]) {
          arr.shift();
        }
        if ((arr.length = 3)) {
          arr.pop();
        }
      }
      const Str = arr[0] + " " + arr[1];
      return Str;
    };

    //提交
    const onSubmit = async (values) => {
      values.userId = localStorage.getItem('userId')
      values.area = Fix(values.area);
      console.log(values);
      values.avatar = values.avatar[0].content;
      values.height = Number(values.height)
      const res = await personal(values)
      if(!res.errno == 0 ) {
        console.log(res.message);
      }else {
        router.push('/recommend')
      }
    };
    return {
      state,
      onSubmit,
      areaList,
      onConfirm,
      value,
      onConfirmtime,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate,
    };
  },
};
</script>

<style>
</style>